<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		.lunbo_wrap {
			margin: 0 auto;
			width: 600px;
			border: 1px solid firebrick;
			position: relative;
			overflow: hidden;
		}
		
		.pic_box {
			position: absolute;
			width: 9999px;
			/*transition: all .5s linear;*/
		}
		
		.pic_box li {
			float: left;
			/*position: absolute;*/
		}
		
		.pic_box li img {
			display: block;
			/*width: 500px;*/
		}
		
		.pannel {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;
			margin: 0 auto;
		}
		
		.pannel li {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: white;
			margin-left: 10px;
			display: block;
			float: left;
			cursor: pointer;
		}
		
		.pannel li.active {
			background: red;
		}
		
		.right_arrow,
		.left_arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 50px;
			color: white;
			background: rgba(0, 0, 0, .5);
			text-align: center;
			cursor: pointer;
		}
		
		.right_arrow {
			right: 0;
		}
		
		.left_arrow {
			left: 0;
		}
	</style>

	<body>
		<div class="lunbo_wrap">
			<ul class="pic_box">
				<li><img src="img/meizi1.jpg" /></li>
				<li><img src="img/meizi2.jpg" /></li>
				<li><img src="img/meizi3.jpg" /></li>
				<li><img src="img/meizi4.jpg" /></li>
				<li><img src="img/meizi5.jpg" /></li>
			</ul>
			<ul class="pannel">
				<!--<li class="active"></li>-->
			</ul>
			<span class="right_arrow">&gt;</span>
			<span class="left_arrow">&lt;</span>
		</div>
	</body>  

	<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var cur_index = last_index = 0, //当前index
			imglen = $(".pic_box li").length; //图片总数
		var lunbo_width = $(".lunbo_wrap").innerWidth();
		$(".lunbo_wrap").height(lunbo_width * (400 / 600));
		$(".pic_box li img").each(function(index) {
				$(this).width(lunbo_width)
				$(".pannel").append("<li></li>")
				if(index == 0) {
					$(".pannel li").eq(index).addClass("active")
				}
			})
			//		lunbo_wrap.style.height = lunbo_width * (400 / 600) + "px";

		//每2.5秒图片切换
		var changetime = setInterval(function() {
				if(cur_index < imglen - 1) {
					cur_index++
				} else {
					cur_index = 0
				}
				change(cur_index);
				console.log(cur_index)
			}, 1500)
			//动态添加小圆点
			//点击图片切换
		$(".right_arrow").on("click", function() {
			cur_index++;
			if(cur_index > imglen - 1) {
				cur_index = 0;
			} //实现最后一张到第一张图片的转变
			change(cur_index);
		});

		$(".left_arrow").on("click", function() {
				cur_index--;
				if(cur_index < 0) {
					cur_index = imglen - 1
				} //实现第一张到最后张图片的转变
				change(cur_index);

			})
			//鼠标悬停清除定时器
			//	var time = setTimeout(right,1000)
		$(".lunbo_wrap").hover(
			function() {
				clearInterval(changetime);
			},
			function() {
				autoChangeAgain();
			});
		//鼠标停放变换
		function autoChangeAgain() {
			changetime = setInterval(function() {
				if(cur_index < imglen - 1) {
					cur_index++;
				} else {
					cur_index = 0;
				}
				//调用变换处理函数
				change(cur_index);
			}, 1500)
		}

		$(".pannel li").on("click", function() {
			cur_index = $(this).index();
			change(cur_index)
			$(this).addClass("active").siblings().removeClass("active")
		})

		function change(a) {
			if(cur_index == 0 && last_index == imglen - 1) {
				//				var one_sitch  =true
				var first_pic = $(".pic_box li").eq(0).clone(true)
				$(".pic_box").append(first_pic);
				$(".pic_box").animate({
					left: "-" + imglen * lunbo_width
				}, 500, function() {
					$(".pic_box").css("left", "0");
					first_pic.remove();
				})
			} else if(cur_index == imglen - 1 && last_index == 0) {
				//				alert(111)
				var last_pic = $(".pic_box li:last-child").clone(true)
				$(".pic_box").prepend(last_pic);
				$(".pic_box").css({
					left: -lunbo_width
				}).animate({
					left: 0
				}, function() {
					$(".pic_box").css({
						left: -((imglen - 1) * lunbo_width)
					})
					last_pic.remove();
				})
			} else {
				var goleft = a * 600; //向左移动
				$(".pic_box").animate({
						left: "-" + goleft + "px"
					}, 500) //0.5秒动画效果向左移动

			}
			last_index = cur_index;
			$(".pannel li").each(function(index) {
				$(".pannel li").eq(index).removeClass();
			})
			$(".pannel li").eq(cur_index).addClass("active")
		};
	</script>
	</body>

</html>